<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .main {
            width: 950px;
            height: 600px;
        }

        .left {
            width: 420px;
            height: 600px;

            float: left;
            text-align: center;
        }

        .right {
            width: 530px;
            height: 600px;

            float: right;
        }

        .right1 {
            width: 260px;
            height: 600px;

            float: left;
        }

        .right2 {
            width: 260px;
            height: 600px;

            float: left;
        }
    </style>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">
    <p>
        <el-divider><i class="el-icon-mobile-phone"></i>商家详情</el-divider>
    </p>
    <div class="main">
        <div class="left">

            <el-input v-model="searchInfo.id" type="hidden"></el-input>
            <p>
                店主名字：<el-input v-model="searchInfo.bname" readonly="readonly" style="width:170px;margin-top: 20px;">
            </el-input>
            </p>
            <p>
                详细地址：<el-input v-model="searchInfo.store.location" readonly="readonly" style="width:170px;margin-top: 20px;">
            </el-input>
            </p>
            <p>
                申请时间：<el-input v-model="searchInfo.applicationdate" readonly="readonly" style="width:170px;margin-top: 20px;">
            </el-input>
            </p>
            <p>
                经营类别：<el-input v-model="searchInfo.category.category" readonly="readonly" style="width:170px;margin-top: 20px;">
            </el-input>
            </p>
            <p>
                手机号码：<el-input v-model="searchInfo.telephone" readonly="readonly" style="width:170px;margin-top: 20px;">
            </el-input>
            </p>
            <p>
                支付宝号：<el-input v-model="searchInfo.payaccount" readonly="readonly" style="width:170px;margin-top: 20px;">
            </el-input>
            </p>
            <button type="button" class="btn btn-success" @click="check()">审核</button>
            <button type="button" class="btn btn-primary" @click="goBack()">返回</button>
        </div>
        <div class="right">

            <div class="right1">
                <p>头像：</p>
                <img :src="searchInfo.bicon"
                     class="img-circle" style="width: 200px; height: 200px;">
                <p>营业执照：</p>
                <img :src="searchInfo.license"
                     class="img-rounded" style="width: 200px; height: 200px;">
            </div>

            <div class="right2">
                <p>身份证正面：</p>
                <img :src="searchInfo.cardfront"
                     class="img-rounded" style="width: 200px; height: 200px;">
                <p>身份证反面：</p>
                <img :src="searchInfo.cardreverse"
                     class="img-rounded" style="width: 200px; height: 200px;">
            </div>

        </div>
        <el-dialog title="审核原因" :visible.sync="showReasonVisible" width="30%" center>
						<span>

							<el-form :model="showReason" status-icon :rules="rules" ref="showReason" label-width="100px"
                                     class="demo-ruleForm" style="text-align: center">

                                 <el-form-item prop="id">
                                 <el-input v-model="showReason.id" type="hidden"></el-input>
                                </el-form-item>

                                <p>审核状态</p>
                                <el-form-item prop="state">
                                 <el-select v-model="showReason.state" placeholder="请选择是否通过">
                                    <el-option>请选择是否通过</el-option>
                                    <el-option v-for="(s,i) in stateArr" :value="s.id" :label="s.state"  >  </el-option>
                                </el-select>
                                </el-form-item>

                               <p>原因</p>
                                 <el-form-item prop="reason">
                                 <el-input v-model="showReason.reason" placeholder="审核原因"   style="display: inline-block; width: 200px;"></el-input>
                                </el-form-item>
                            </el-form>
						</span>
              <span slot="footer" class="dialog-footer">
                          <el-button @click="ensure()">确定</el-button>
                          <el-button @click="showReasonVisible=false">取 消</el-button>
              </span>
        </el-dialog>
    </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            showReasonVisible:false,
            searchInfo: {
                store:{},
                category:{}
            },
            stateArr:[],
            showReason:{},
            rules: {
                reason:[
                    { required: true, message: '请输入理由', trigger: 'blur' },
                    { pattern: /^[\u4e00-\u9fa5]+$/,message: '输入的理由有误',trigger: 'blur'}
                ]
            }
        },
        methods: {
            ensure:function(){
                app.$refs["showReason"].validate((valid) => {
                    if (valid) {
                        var id=window.location.href.split("=")[1];
                        app.showReason.id=id;
                        $.post("/cai/businessCheck/updateState",app.showReason,function (backData) {
                            if(backData.code=1){
                                alert(backData.msg);
                                app.showReasonVisible=false;
                            }
                            else{
                                alert(backData.msg);
                            }
                        });
                    }
                });
            },
            check:function(){
                if(app.searchInfo.state==1) {
                    app.showReasonVisible = true;
                    $.get("/cai/businessCheck/stateListOneTwo", function (backData) {
                        app.stateArr = backData.data;
                    });
                }
                else{
                    alert("该商家已通过，不用再审核了");
                }
            },
            goBack:function () {
                window.location.href="/cai/businessCheck.html";
            }
        }
    });

    var id=window.location.href.split("=")[1];
    $.get("/cai/businessCheck/getOne/"+id,function (backData) {
        app.searchInfo=backData.data;
    });
</script>

</body>
</html>
